<template>
  <div>
    姓名：{{name}}<br />
    年龄：{{age}}<br>
    <button @click="handleChange">变更</button>
  </div>
</template>
<script>
import { reactive, toRefs } from 'vue'

export default {
  setup () {
    const state = reactive({
      name: '孙小双',
      age: 18
    })
    const handleChange = () => {
      state.name = '华天晓'
      state.age = 33
    }
    return {
      ...toRefs(state),
      handleChange
    }
  }
}
</script>
